<template>
  <div class='datatop clearfix'>
    <div class="container clearfix">
        <div class="box box1">
        <p class="box-num">18</p>
        <p class="box-title">今日参加活动人次</p>
      </div>
      <div class="box box2">
        <p class="box-num">￥2330.00</p>
        <p class="box-title">今日活动收入</p>
      </div>
      <div class="box box3">
        <p class="box-num">18</p>
        <p class="box-title">今日课程订单数</p>
      </div>
      <div class="box box4">
        <p class="box-num">￥2330.00</p>
        <p class="box-title">今日课程订单收入</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang='less' scoped>
  .datatop{
    position: relative;
    height: 186px;
  }
  .container{
    width: 1245px;
    max-width: 1250px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .box{
    width: 310px;
    height: 166px;
    margin: 10px 0;
    color: white;
    float: left;
    .box-num{
      padding-top:35px ;
      padding-left: 40px;
      font-size: 36px;
      font-weight: bold;
      font-family: '微软雅黑';
    }
    .box-title{
      padding-top: 10px;
      padding-left: 40px;
      font-size: 18px;
      font-weight: bold;
      font-family: '微软雅黑';
    }
  }
  .box1{
    background: url('../../../assets/img/main/1/main-beijing-18.png');
    position: relative;
    &::before{
      content: '';
      background: url('../../../assets/img/main/1/main-beijing-18-jianbiankuai1.png');
      position: absolute;
      width: 210px;
      height: 4px;
      left: 50px;
      bottom: 42px;
    }
    &::after{
      content: '';
      background: url('../../../assets/img/main/1/main-beijing-18-jianbiantiao.png') no-repeat;
      position: absolute;
      width: 74px;
      height: 4px;
      left: 74px;
      bottom: 42px;
    }
  }
  .box2{
    background: url('../../../assets/img/main/2/main-beijing-2330.png');
    position: relative;
    &::before{
      content: '';
      background: url('../../../assets/img/main/2/main-beijing-2330-jianbiankuai1.png');
      position: absolute;
      width: 210px;
      height: 4px;
      left: 50px;
      bottom: 42px;
    }
    &::after{
      content: '';
      background: url('../../../assets/img/main/2/main-beijing-18-jianbiantiao2.png') no-repeat;
      position: absolute;
      width: 120px;
      height: 4px;
      left: 24px;
      bottom: 42px;
    }
  }
  .box3{
    background: url('../../../assets/img/main/3/main-beijing-18-2.png');
    position: relative;
    &::before{
      content: '';
      background: url('../../../assets/img/main/3/main-beijing-18-jianbiankuai2.png');
      position: absolute;
      width: 210px;
      height: 4px;
      left: 50px;
      bottom: 42px;
    }
    &::after{
      content: '';
      background: url('../../../assets/img/main/3/main-beijing-2330-jianbiantiao.png') no-repeat;
      position: absolute;
      width: 74px;
      height: 4px;
      left: 74px;
      bottom: 42px;
    }
  }
  .box4{
    background: url('../../../assets/img/main/4/main-beijing-2330-2.png');
    position: relative;
    &::before{
      content: '';
      background: url('../../../assets/img/main/4/main-beijing-2330-jianbiankuai2.png');
      position: absolute;
      width: 210px;
      height: 4px;
      left: 50px;
      bottom: 42px;
    }
    &::after{
      content: '';
      background: url('../../../assets/img/main/4/main-beijing-2330-jianbiantiao2.png') no-repeat;
      position: absolute;
      width: 120px;
      height: 4px;
      left: 74px;
      bottom: 42px;
    }
  }
</style>